<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zshop manager</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <link rel="stylesheet" href="../resources/css/index.css">
    <script type="text/javascript" src="../resources/jquery/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="app" style="height: 100%">
    <el-row >
        <el-col id="nav-top" :span="24">
            <!--页头-->
            <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"><img src="../resources/icon/zshop-icon-white.png" style="height: inherit"/></el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
    <el-row style="height: 100%;">
        <el-col id="nav-left" :span="4" style="height: 100%">
            <!--侧导航栏-->
            <el-menu default-active="0" class="el-menu-vertical-demo" @select="handleSelect"  style="height: 100%">
                <el-submenu :index="data.index" v-for="data in menuData">
                    <template slot="title"><i class="el-icon-message"></i>{{data.title}}</template>
                    <el-menu-item-group v-for="controller in data.controllers">
                        <el-menu-item :index="controller.name" @click="selectController(controller.name)">{{controller.title}}</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>

            </el-menu>
        </el-col >
        <el-col id="controllers" :span="20" style="height: inherit">


            <!--控制中心-->
            <div id="controller" v-for="data in menuData">
                <div v-for="controller in data.controllers">

                    <div :id="'controller-'+controller.name" class="controller">
                        <!--面包屑-->
                        <div style="padding: 10px; background: #EFF2F7;">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item>{{data.title}}</el-breadcrumb-item>
                                <el-breadcrumb-item>{{controller.title}}</el-breadcrumb-item>
                                <el-button size="mini" icon="caret" style="float:right" @click="fullScreen">全屏</el-button>
                            </el-breadcrumb>
                        </div>
                        <div :id="'controller-'+controller.name+'-content'">

                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>



</div>

<style>

</style>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../resources/js/index.js"></script>
<script type="text/javascript">
    //隐藏所有controller
    $('.controller').css('display','none');

    var vm = new Vue({
        el:'#app',
        data:{
            activeIndex:'1',
            tabs:[],
            menuData:[
                {
                    index:'1',
                    title:'商品管理',
                    //全屏计数 1为全屏
                    fullScreenCount:0,
                    controllers:[
                        {
                            title:'添加商品',
                            name:'addGoods',
                            url:'demo.html',
                            loadCount:0,
                        },
                        {
                            title:'查询商品',
                            name:'queryGoods',
                            url:'item-list.html',
                            loadCount:0,
                        },
                        {
                            title:'规格参数',
                            name:'specifications',
                            url:'',
                            loadCount:0,
                        },
                    ]
                },
                {
                    index:'2',
                    title:'商品内容管理',
                    controllers:[
                        {
                            title:'内容分类管理',
                            name:'contentManager',
                            url:'',
                            loadCount:0,
                        },
                        {
                            title:'内容管理',
                            name:'contentManager',
                            url:'',
                            loadCount:0,
                        },
                    ]
                },
            ],
            selectController(controllerName){
                $('.controller').css('display', 'none');
                $('#controller-'+controllerName).css('display', 'block');

                var menuData = vm.$data.menuData;
                for (var i=0;i<menuData.length;i++){
                    var controllers = menuData[i].controllers;
                    for (var j=0;j<controllers.length;j++){
                        var controller = controllers[j];
                        if (controller.name==controllerName){
                            if (controller.loadCount==0){
                                //第一次加载
                                console.log(controllerName + " load contemt");
                                var url = controller.url;
                                if (!url){
                                    url = 'demo.html';
                                }
                                $('#controller-' + controllerName+'-content').load(url);
                                controller.loadCount++;
                            }
                            return;
                        }
                    }
                }
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            fullScreen(){
                var fullScreenCount = vm.$data.fullSereenCount;
                var nav = $('#nav-left,#nav-top');
                //已经全屏 缩小
                if(fullScreenCount==1){
                    nav.css('display','black');
                    $('#controllers').css('width','');
                    vm.$data.fullSereenCount=0;
                }else{
                    nav.css('display','none');
                    $('#controllers').css('width','100%');
                    vm.$data.fullSereenCount=1;
                }
            }
        }
    });
    //初始进入页面
    vm.$data.selectController('addGoods');
</script>
</body>
</html>
